<template>
    <div>
        <!-- <ul :class="taoliebiao.status? 'setMealBox setMealBox1' : 'setMealBox'" v-if="taoliebiao.deepclean !== undefined && taoliebiao.deepclean.length >0"> -->
        <ul v-if="mealSmallItems && mealSmallItems.length >0" class="setMealBox">
            <li v-for="fenlei in mealSmallItems" :key="fenlei.id" @click="buyBtn(fenlei.category,fenlei.name,fenlei.type)">
                <i class="iconfont" :class="[fenlei.smallIcons, fenlei.color]"></i>
                <p>{{ fenlei.name }}</p>
            </li>
        </ul>

        <!-- 支付组件 Pay -->
        <mt-popup  v-model="popupVisible" position="bottom" class="paybottom">
            <Pay :payData="this.payData" @close="close"></Pay>
        </mt-popup>

        <div class="baojieBox" v-if="mealItems.category">
            <div class="baojieContent">
                <h2 :style="note">{{ mealItems.category }}</h2>
                <ul class="baojieList">
                    <li v-for="taocan2 in mealItems.list" :key="taocan2.id">
                        <div class="baojieListLeft">
                            <img :src="taocan2.image[0]" alt>
                        </div>
                        <div class="baojieListRight">
                            <p>{{ taocan2.name }}</p>
                            <span>{{ taocan2.detail }}</span>
                            <p style="color:red; font-size:80%;">￥{{ taocan2.price }}</p>  
                            <div>  
                                <a :href="detailTaocao( taocan2.itemId )">了解详情</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
import Pay from '@/components/Pay.vue'
export default {
  name: "Taocan",
  components:{
      Pay
  },
  props: {
    mealSmallItems: {
      type: Array,
      required: true,
      default:() => {
          return []
      }
    },
    mealItems:{
        type: Object,
        required: true,
        default:()=>{
            return {}
        }
    }
  },
  data() {
    return {
      note: {
        backgroundImage: "url(" + require("../assets/images/tctitbg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "56% 50%",
        backgroundPosition: "50% 70%"
      },
      popupVisible: false
    }
  },
  computed:{
      ...mapState({
          payData:state => state.baojieModules.mealSmallItemsData
      })
  },
  methods: {
    ...mapActions({
        getMealSmallItemsData:'baojieModules/getMealSmallItemsData'
    }),
    detailTaocao(itemId) {
      return "/taocandetail?itemId=" + itemId;
    },
    buyBtn(category,name,type){
        this.getMealSmallItemsData({category:category,name:name,type:type});
        this.popupVisible = true
    },
    close(){
        this.popupVisible = false
    },
  }
}
</script>

<style lang="scss">
@import "../assets/style/bjfw.scss";
</style>

